<template>
  <div class="homeHeader">
    <div class="center">
      <div class="center-left">
        欢迎光临集汇得！
      </div>
      <div class="center-right">
        <ul class="right-list">
          <li class="right-list-li">下载APP</li>
          <li class="right-list-li">我的订单</li>
          <li class="bulidMater">建材中心
            <img src="./img/bulidMater2x.png" alt="角标">
            <ul class="bulidMater-list">
              <li>建材商登录</li>
              <li>建材商入驻</li>
            </ul>
          </li>
          <li class="right-list-li">意见及建议</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>

export default {
    name: 'homeHeader',
    data() {
      return {
      }
    }
  }
</script>
<style scoped lang="scss">
.homeHeader {
  height: 30px;
  line-height: 30px;
  background: #E7EEFF;
  font-size: 8px;
  color: #252525;
  .center {
    display: flex;
    justify-content: space-between;
    width: 84%;
    margin: 0 auto;
    .center-left {
      cursor: pointer;
    }
    .center-right {
      .right-list {
        display: flex;
        justify-content: space-between;
        li {
          cursor: pointer;
          padding: 0 10px;
        }
        .right-list-li:hover {
          color: $public-color;
          transition: all .3s ease;
        }
        li:last-child {
          padding-right: 0px;
        }
        .bulidMater {
          img {
            vertical-align: middle;
            padding: 0 6px;
          }
          position: relative;
          .bulidMater-list {
            display: none;
            position: absolute;
            background: #E6E9F2;
            left: 0;
            li {
              line-height: 30px;
            }
            li:hover {
              color: $public-color;
              transition: all .3s;
            }
          }
        }
        .bulidMater:hover .bulidMater-list {
          display: block;
        }
      }
    }
  }
}
</style>
